<script setup>
	import {
		ref,
		reactive,
		toRefs,
		computed,
		onMounted,
		watch,
	} from 'vue'

	import {
		ElMessage
	} from 'element-plus'
	import router from "@/router";
	import api from '@/api/api';
	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
	})

	// 页面数据
	const pages = reactive({})
	const carouselRef = ref();

	// 安装
	onMounted(async () => {
		init();
	})

	// 初始化
	function init() {}

	// 组件暴露
	defineExpose({})

	// 回调
	const emit = defineEmits(['change'])
</script>

<template>
	<div class="layout2-left">
		<el-carousel ref="carouselRef" height="503px" motion-blur>
			<el-carousel-item v-for="(item,index) in list" :key="index">
				<el-image :src="util.getHttpImageUrl(item.image)" fit="cover" class="test-img" />

				<div class="content-view">
					<p class="title t2hd">{{item.title || '--'}}</p>
					<p class="zhishi">
						<img :src="util.getImageUrl('left.png')" @click="carouselRef.prev()" />
						<span>{{index+1}}/{{list.length}}</span>
						<img :src="util.getImageUrl('right.png')" @click="carouselRef.next()" />
					</p>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<style lang="scss" scoped>
	.layout2-left {
		background: #F5F8FD;
		border-radius: 10px 10px 10px 10px;
		overflow: hidden;

		.test-img {
			width: 100%;
			height: 396px;
		}

		.content-view {
			padding: 20px 25px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 50px;

			.title {
				font-weight: bold;
				font-size: 18px;
				color: #333333;
				line-height: 28px;
				height: 56px;
			}

			.zhishi {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 20px;
				color: #666666;

				img {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}

				span {
					margin: 0 10px;
				}
			}
		}
	}
</style>